<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渲染函数</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<div id="app">
    <anchored-heading :level="1">Hello world!</anchored-heading>

<div>123</div>

</div>
<script>



    Vue.component('anchored-heading', {
        // render函数
        render (createElement) {
            return createElement('h' + this.level,//标签名称
                this.$slots.default // 子节点数组
            )
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        }
    });

    Vue.component('MyComponent',{
        template:'<h2>我是一个组件</h2>'
        }

    );
    const vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            message: 'hello 感谢使用钩子函数参数'
        },
        render(h){
            return h( // {String | Object | Function}
                // 一个 HTML 标签名、组件选项对象，或者
                // resolve 了上述任何一种的一个 async 函数。必填项。
                'div',

                // {Object}
                // 一个与模板中 attribute 对应的数据对象。可选。
                {
                    // 与 `v-bind:class` 的 API 相同，
                    // 接受一个字符串、对象或字符串和对象组成的数组
                    'class': {
                        foo: true,
                        bar: false
                    },
                    // 与 `v-bind:style` 的 API 相同，
                    // 接受一个字符串、对象，或对象组成的数组
                    style: {
                        color: 'red',
                        fontSize: '14px'
                    },
                    // 普通的 HTML attribute
                    attrs: {
                        id: 'foo'
                    },
                    // 组件 prop
                    props: {
                        myProp: 'bar'
                    },
                    // DOM property
                    domProps: {
                        innerHTML: 'baz'
                    },
                    // 事件监听器在 `on` 内，
                    // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
                    // 需要在处理函数中手动检查 keyCode。
                    on: {
                        click: this.clickHandler
                    },
                    // 仅用于组件，用于监听原生事件，而不是组件内部使用
                    // `vm.$emit` 触发的事件。
                    nativeOn: {
                        click: this.nativeClickHandler
                    },
                    // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
                    // 赋值，因为 Vue 已经自动为你进行了同步。
                    directives: [
                        {
                            name: 'my-custom-directive',
                            value: '2',
                            expression: '1 + 1',
                            arg: 'foo',
                            modifiers: {
                                bar: true
                            }
                        }
                    ],
                    // 作用域插槽的格式为
                    // { name: props => VNode | Array<VNode> }
                    scopedSlots: {
                        default: props => createElement('span', props.text)
                    },
                    // 如果组件是其它组件的子组件，需为插槽指定名称
                    slot: 'name-of-slot',
                    // 其它特殊顶层 property
                    key: 'myKey',
                    ref: 'myRef',
                    // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
                    // 那么 `$refs.myRef` 会变成一个数组。
                    refInFor: true
                },

                // {String | Array}
                // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
                // 也可以使用字符串来生成“文本虚拟节点”。可选。
                [
                    '先写一些文字',
                    h('h1', '一则头条'),
                    h("MyComponent", {
                        props: {
                            someProp: 'foobar'
                        }
                    })
                ])
        },
        components: {},
        myOption: "",
        mixins: [],
        // 注册局部指令
        directives: {
            myfocus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {},
        computed: {}
    })
</script>
</body>
</html>
